<template>
	<Layout class="p-5 bg-white">
		<Form :label-width="100">
			<Row class="p-1">
				<Col span="24">
					<FormItem class="w-50" label="产品名称">
						<Input v-model="product.name" placeholder="请输入产品名称"></Input>
					</FormItem>
					
					
					<FormItem  class="w-50" label="产品分类">
						<Select  @on-change="loadCategorys(item.categoryId, item.value)" v-for="(item, index) in this.categorysArrays" :key="index" v-model="item.value"   >
							<Option  v-for="(category, jndex) in item.source" :key="jndex" :value="category.categoryId">{{category.name}}</Option>
						</Select>
						<Button class="mt-2 " style="float: right;" type="error" @click="changeType()" >重置分类</Button>
					</FormItem>
					
					
					

					<FormItem class="w-50" label="产品状态">
						<Select v-model="product.statu"  clearable >
							<Option value="1">激活</Option>
							<Option value="0">禁用</Option>
						</Select>
					</FormItem>
					
					<FormItem class="w-50" label="产品价格">
						<Input v-model="product.price" @on-keyup="price(product.price)" placeholder="请输入产品价格"></Input>
					</FormItem>
					
					<FormItem class="w-50" label="产品封面">
						<div class="d-flex flex-row">
							<label class="ivu-input">{{coverFile.name}}</label>
							<label style="line-height: 30px;" class="ivu-btn ivu-btn-default ml-1" for="cover">选择文件</label>
							<input @change="fileChange($event,coverFile)" id="cover" style="display: none;" type="file"></input>
						</div>
						<div class="d-flex flex-row mt-2">
							<img v-if="coverFile.url != ''" class="w-50" :src="coverFile.url" />
						</div>
					</FormItem>
						
					<FormItem class="w-50" label="产品详情图片">
						<div class="d-flex flex-row">
							<Button @click="addImg" type="info">添加图片</Button>
						</div>
						<div class=" mt-2">
							<span class="m-2 d-inline-block w-25" v-for="(img, index) in detailFiles" :key="index">
								<label class="w-100" :for="'detail'+index">
									<img v-if="img.url" class="w-100" :src="img.url" />
									<span v-else >选择文件</span>
								</label>
								<input @change="fileDetailChange($event, img)" :id="'detail'+index" style="display: none;" type="file"></input>
								<Button :id="index" @click="deleteImg(index)" type="error">删除</Button>
							</span>
						</div>
					</FormItem>
						
					
				</Col>
				
			</Row>
			<Row class="p-1">
				<Col span="24">
					<FormItem class="" label="产品图文内容">
						<div style="display: block; position: relative; z-index: 0;" id="editor">
							
						</div>
					</FormItem>
				</Col>
			</Row>
			<Row class="p-1">
				<Col span="24">
					<FormItem class="text-right">
						<Button @click="submit" type="primary">提交</Button>
						<Button @click="cancel" class="ml-2">取消</Button>
					</FormItem>
				</Col>
			</Row>
	
			
			
			
		</Form>
	</Layout>
</template>

<script>
	import E from "wangeditor";
	
	export default {
		data() {
			return {
				product:{
					productId: "",
					name: "",
					price: "",
					coverImageId:"1",
					categorys:"",
					contant:"",
					statu: "1",
				},
				image: {
					imgId: "",
					url: "",
					statu: "",
					dFlg: ""
				},
			
				coverFile: {
					name: "",
					file: undefined,
					url:""
				},
				detailFiles: [
					
				],
				categorysArrays: [
					
				],
				categorys:[
					
				],
				
				
				
			}
		},
		methods: {
			price(){
			         if(this.product.price == 0){
			           this.product.price=""
			         }else{
			           this.product.price=this.product.price.replace(/\D/g,'')
			         }
			     
			       },
			changeType: function(i){
				
				this.categorys = []
				this.categorysArrays = []
				this.loadCategorys(null, 0);
				
			},
			
			loadCategorys: function(event, categoryId) {
				
				let targetIndex = undefined;
				for (let index = 0; index < this.categorysArrays.length; index++) {
					let targetCategorys = this.categorysArrays[index];
					if (event === targetCategorys.categoryId) {
						targetIndex = index;
						break;
					}
				}
				
				targetIndex = targetIndex + 1;
				
				if (targetIndex !== undefined) {
					this.categorysArrays.splice(targetIndex, this.categorysArrays.length - targetIndex);
					
					// console.log(this.categorysArrays);
				}
				
				if (categoryId !== null && categoryId !== undefined && categoryId !== "") {
					this.http.get({
						url: "/product/category/info",
						param: {
							categoryId
						}
					}).then(res => {
						// console.log(res);
						
						let categorysSource = {
							categoryId,
							value: "",
							source: res.category.subCategory,
						};
						
						this.categorysArrays.push(categorysSource);
						
						if(categoryId !== 0){
							let category = {
								categoryId:"■"+categoryId+"■",
								name:"■"+res.category.name+"■"
							}
							console.log(this.categorys)
							this.categorys.push(category)
						}
						
					});
				}
				
				
			},
			deleteImg: function(index) {
				// console.log(index);
				this.detailFiles.splice(index, 1);
				console.log(this.detailFiles);
			},
			fileChange: function(e,imgItem) {
				
				
				imgItem.file = e.target.files[0];
				imgItem.name = imgItem.file.name;
				
				let reader = new FileReader();
				reader.onloadend = function() {
					imgItem.url = this.result;
					this.url = this.result;
				}
				reader.readAsDataURL(imgItem.file);
				imgItem.onProgress = this.onProgress;
				// console.log(this.url);
			},
			
			addImg: function() {
				
				
				this.detailFiles.push({
					
					
					name: this.detailFiles.length,
					file: undefined,
					url: "",
				});
			},
			fileDetailChange: function(e, imgItem) {
				imgItem.file = e.target.files[0];
				imgItem.name = imgItem.file.name;
				
				let reader = new FileReader();
				reader.onloadend = function() {
					imgItem.url = this.result;
				}
				reader.readAsDataURL(imgItem.file);
				
				imgItem.onProgress = this.onProgress;
			},
			
			
			onProgress: function(pData) {
				console.log(pData);
			},
			submit: function() {
				// console.log(this.categorysArrays)
				
				this.product.categorys = this.categorysArrays[0]
				 
				let self = this;
				
				
				if (this.product.name.length === 0) {
					this.message.error("请输入产品名称");
					return;
				}
				if (this.product.categorys.length === 0) {
					this.message.error("请选择产品分类");
					return;
				}
				if (this.product.statu.length === 0) {
					this.message.error("请选择产品状态");
					return;
				}
				if (this.product.price.length === 0 ) {
					this.message.error("请输入产品价格");
					return;
				}
				if (this.product.price < 0) {
					this.message.error("产品价格不能为负数");
					return;
				}
				if (this.common.isEmptyString(this.coverFile.name)) {
					this.message.warning("请上传产品封面图片");
					return;
				}
				// if (this.common.isEmptyString(this.productImage.name)) {
				// 	this.message.warning("请上传产品详情图片");
				// 	return;
				// }
				
				// this.common.submitFile(self.detailFiles).then(function(res) {
				// 	self.detailFiles.url = res.Location;
				// 	console.log(self.detailFiles.url)
					
				// }).catch(function(err) {
				// 	console.log( res.Location)
				// 	console.log(err)
					
				// 	self.message.error("产品详细图片上传失败，取消新增产品。");
				// });
				
				this.common.submitFile(this.coverFile).then(function(res) {
					self.coverFile.url = res.Location;
					// console.log(self.coverFile.url)
					console.log(self.categorys)
					console.log(JSON.stringify(self.categorys))
					self.http.post({
						url: "/product/info",
						param: {
							name: self.product.name,
							price: self.product.price,
							categorys:JSON.stringify(self.categorys),
							contant: self.editor.txt.html(),
							statu: self.product.statu,
							url:self.coverFile.url,
							urlS:self.detailFiles.url
						}
					}).then(data => {
						self.message.info("添加成功");
						self.$tabs.close();
					});
				}).catch(function(err) {
					console.log(err)
					self.message.error("封面文件上传失败，取消新增产品。");
				});
				
				
				
			},
			// 失去焦点
			onEditorBlur(editor) {},
			// 获得焦点
			onEditorFocus(editor) {},
			// 开始
			onEditorReady(editor) {},
			// 值发生变化
			onEditorChange(editor) {
				this.contant = editor.html;
			},
			cancel: function() {
				this.$tabs.close();
			},
			init: function() {
				this.loadCategorys(null, 0);
			}
		},
		
		mounted() {
			this.editor = new E("#editor");
			
			let self = this;
			this.editor.config.customUploadImg = this.common.editorUploadFile;
			this.editor.create();
		},
		created: function(){
			this.init();
		}
	}
</script>

<style>
</style>
